<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Menu List</title>


    <script src="/js/import-scripts.js"></script>

    <style>
        .menu-icon-big{
            width:100px;
            height: 100px;
            position:absolute;
        }
        .menu-icon-small{
            width:50px;
            height: 50px;
        }
    </style>

    <script>
        function showBigIcon(target) {
            $(target).removeClass("menu-icon-small").addClass("menu-icon-big");
        }
        function showSmallIcon(target) {
            $(target).removeClass("menu-icon-big").addClass("menu-icon-small");
        }
    </script>
</head>
<body>
    <div class="container">

        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        Price
                    </td>
                    <td>
                        Vip Price
                    </td>
                    <td>
                        Description
                    </td>
                    <td>
                        Category
                    </td>
                    <td>
                        Image
                    </td>
                    <td>

                    </td>
                </tr>
            </thead>
            <tbody>
                <tr th:each="m : ${list}">
                    <td>
                        <a th:text="${m.name}" th:data-id="${m.id}" onclick="loadHtml('/cate/detail/'+this.getAttribute('data-id'))" ></a>
                    </td>
                    <td th:text="${m.price}">
                        Price
                    </td>
                    <td th:text="${m.vipPrice}">
                        Vip Price
                    </td>
                    <td th:text="${m.description}">
                        Description
                    </td>
                    <td>
                        <a th:text="${m.category.name}" th:data-id="${m.category.code}" onclick="loadHtml('/category/detail/'+this.getAttribute('data-id'))"></a>
                    </td>
                    <td>
                        <img th:src="${m.iconPath}" onmouseenter="showBigIcon(this)" onmouseout="showSmallIcon(this)" class="menu-icon-small">
                    </td>
                    <td>

                    </td>
                </tr>
            </tbody>
        </table>

    </div>

</body>
</html>